<template>
  <div id="search">
    <div id="search_input_div">
      <Input id="search_input"
          :model-value="value"
          v-model="value"
             size="large"
             search
             @on-enter="change()"
             placeholder="search something..." />
    </div>

    <div>
      <Tabs :value="catName"
            v-model="catName"
            @on-click="tabClick()">
        <div v-for="item in catData"
             :key="item">
          <TabPane :label=item.name
                   :name=item.name>
          </TabPane>
        </div>
      </Tabs>

      <Table :columns="columns"
             :data="playListData"
             @on-row-dblclick="userRoot"></Table>
    </div>

    <div style="margin-bottom: 20px;margin-top: 20px;">
      <Page :total="total"
            :page-size="pageSize"
            :current="current"
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange" />
    </div>
  </div>
</template>

`
<script>
import api from '@/api/apis/musicAPI.js'

export default {
  data() {
    return {
      value: null,
      total: 0,
      pageSize: 10,
      current: 1,
      catData: [],
      catName: 1,
      columns: [
        {
          title: ' ',
          key: 'coverImgUrl',
          width: 120,
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.coverImgUrl,
              },
              style: {
                width: '100px',
                height: '100px',
                padding: '10px',
              },
            })
          },
        },

        {
          title: '名称',
          key: 'name',
          align: 'center',
          width: 400,
          render: (h, params) => {
            const styleObject = {
              color: 'black', // 设置字体颜色为红色
            }
            return h('h2', { style: styleObject }, params.row.name) // 传递样式对象和文本内容
          },
        },

        {
          title: 'Count',
          key: 'playCount',
          align: 'center',
          width: 100,
          render: (h, params) => {
            const styleObject = {
              color: 'red', // 设置字体颜色为红色
            }
            return h(
              'h4',
              { style: styleObject },
              (params.row.playCount / 1000).toFixed(2) + ' k'
            ) // 直接将文本作为子元素传递
          },
        },
        {
          title: '更新时间',
          key: 'updateTime',
          align: 'center',
          render: (h, params) => {
            const styleObject = {
              color: '#808695', // 设置字体颜色为红色
            }
            return h('div', { style: styleObject }, params.row.updateTime) // 直接将文本作为子元素传递
          },
        },
      ],
      playListData: [],
    }
  },

  mounted() {
    this.findPlayListCat()
    this.findPlayList()
  },

  methods: {
    //页码切换事件
    tabClick() {
      this.$Message.info(this.catName)
      this.current = 1
      this.findPlayList()
    },
    //页码变更
    pageChange(current) {
      this.current = current
      this.findPlayList()
    },
    //切换每页条数
    pageSizeChange(size) {
      this.pageSize = size
      this.findPlayList()
    },
    //歌单类型
    findPlayListCat() {
      api.playListCat().then((res) => {
        this.catData = res.data.data.tags
        this.catName = this.catData[0].name
      })
    },
    //获取歌单
    findPlayList() {
      api.playList(this.catName, this.current, this.pageSize).then((res) => {
        this.playListData = res.data.data.records
        this.total = res.data.data.total
      })
    },
        //用户点击
    userRoot(row) {
      console.log(row)
      this.$router.push({ path: '/song', query: { playId: row.playId } });
    },
    //用户搜索
    change(){
        this.$router.push({ path: '/searchSong', query: { search: this.value } });
    }
  },
}
</script>

<style scoped>
#search_input_div {
  width: 500px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

#search {
  width: 800px;
  margin: 0 auto;
}

.search_text {
  position: relative;
  text-align: left;
}

/* 文本超出省略号 */
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time {
  color: #808695;
  font-size: 10px;
}

.search_audio {
  display: none;
}
</style>